<template>
  <div class="pagination">
    <div></div>
    <el-pagination 
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
      :current-page="page"
      :page-size="size"
      :page-sizes="pageSizes"
      :background="background"
      :layout="layout"
      :total="total"
    />
  </div>
</template>

<script setup>
import {ref} from 'vue'
import paginationConfig from '@/config/pagination'

// eslint-disable-next-line no-undef
const emits = defineEmits(['onSizeChange', 'onPageChange'])
// eslint-disable-next-line no-undef
defineProps({
  pageSizes: {
    type: Array,
    default: () => paginationConfig.pageSizes
  },
  background: {
    type: Boolean,
    default: paginationConfig.background
  },
  hideOnSinglePage: {
    type: Boolean,
    default: paginationConfig.hideOnSinglePage
  },
  total: {
    type: Number,
    default: paginationConfig.total
  },
  layout: {
    type: String,
    default: paginationConfig.layout
  },
})

const page = ref(paginationConfig.page)
const size = ref(paginationConfig.size)

/* 页数改变 */
function handleSizeChange(currentSize) {
  size.value = currentSize
  emits('onSizeChange', currentSize)
}
/* 当前页改变 */
function handlePageChange(curPage) {
  page.value = curPage
  emits('onPageChange', curPage)
}
</script>

<style scoped lang="scss">
@import '@/assets/style/mixin.scss';

.pagination {
  @include fl();
  margin-top: 20px;
  justify-content: space-between;
}
</style>